<!--
 * @Description: 
 * @Date: 2023-12-20 14:44:03
 * @LastEditTime: 2024-03-04 14:12:37
-->
<template>
  <div class="dbxxFigure">
    <!-- <div>任免登记</div> -->
    <el-row :gutter="4" style="padding: 10px">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="small"
        label-width="107px"
        label-position="left"
        :border="true"
      >
        <!-- <el-col style="padding: 10px;">
          <el-form-item>
            <el-button class="tabs">返回</el-button>
          </el-form-item>
        </el-col> -->
        <!-- :labelStyle="{width: '123px'}" :contentStyle="{width:'42%'}" -->
        <div class="content">
          <el-descriptions
            :column="3"
            border
            size="mini"
            style="width: 70%; margin-top: 10px; margin-right: 50px"
            :labelStyle="{ width: '120px' }"
          >
            <el-descriptions-item label="审议议题" :span="3">
              <div>{{ formData.eventTitle }}</div>
            </el-descriptions-item>
            <el-descriptions-item label="议题类型">
              <div>
                {{
                  getDictLabel(
                    dict.type.yitileixing,
                    formData.eventType,
                    "value",
                    "label"
                  )
                }}
              </div>
            </el-descriptions-item>
            <!--  -->
            <el-descriptions-item label="选择工委">
              <div>{{ formData.gwUserName }}</div>
            </el-descriptions-item>
            <el-descriptions-item label="申请日期">
              <div>{{ formData.eventCreateTime }}</div>
            </el-descriptions-item>
            <!--  -->
            <el-descriptions-item label="议题内容" :span="3">
              {{ formData.eventDetail }}
            </el-descriptions-item>
            <!--  -->
            <el-descriptions-item label="附件信息" :span="3">
              {{ formData.eventFileName }}
            </el-descriptions-item>
          </el-descriptions>
          <div style="height: 300px; width: 170px">
            <el-steps direction="vertical" :active="5">
              <el-step
                v-for="(item, index) in procList"
                :key="index"
                :title="item.nodeName"
              >
                <template slot="description">
                  <div v-show="item.nodeName != '完成'">
                    <div>{{ item.procTime }}</div>
                    <div>{{ item.userName }}</div>
                    <div v-show="item.nodeName != '起草'">
                      审批结果：{{ item.result }}
                    </div>
                    <div v-show="item.result == '驳回'">
                      驳回理由：{{ item.rejectReason }}
                    </div>
                  </div>
                </template>
              </el-step>
            </el-steps>
          </div>
        </div>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { eventProcList } from "@/api/majorIssues/shixiang.js";
import { getDictLabel } from "@/utils/Util.js";

export default {
  components: {},
  props: {
    visible: Boolean,
    formData: {
      type: Object,
      default: {},
    },
  },
  dicts: ["yitileixing"],
  data() {
    return {
      getDictLabel: getDictLabel,
      showType: "type1",
      rules: {
        field102: [
          {
            required: true,
            message: "请选择下拉选择",
            trigger: "change",
          },
        ],
        field103: [
          {
            required: true,
            message: "请输入单行文本",
            trigger: "blur",
          },
        ],
        field104: [],
        field105: [
          {
            required: true,
            message: "请选择提请任免部门",
            trigger: "change",
          },
        ],
        field107: [
          {
            required: true,
            message: "请选择日期选择",
            trigger: "change",
          },
        ],
      },
      field102Options: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      field105Options: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      radio: 1,
      // 流程列表
      procList: [],
    };
  },
  computed: {},
  watch: {
    visible: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val) {
          eventProcList({ crucialId: this.formData.id }).then((res) => {
            this.procList = res.rows;
          });
        }
      },
    },
  },
  created() {},
  mounted() {},

  methods: {
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    changeType(v) {
      this.showType = v;
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs {
  margin-left: 10px;
  width: 150px;
}

.fujian {
  display: flex;
  align-content: center;
  justify-content: space-between;
}

.content {
  width: 100%;
  display: flex;
}

::v-deep.el-descriptions .is-bordered {
  height: 300px;
}
</style>
